<template>
	<view>
		<view class="orderlist_header">
			<view>
				<view class="orderlist_title">订单信息</view>
				<view class="orderlist_info">
					消费订单：{{ordertotal.total_num}} 总消费：￥{{ordertotal.total_price}}
				</view>
			</view>
			<view>
				<image src="../../../static/Mine/orderlist.png"></image>
			</view>
		</view>
		<view class="tabs">
			<view class="tab_item" v-for="(item, index) in tabNavBars" :key="index" @click="tabSelect(index)">
				<view :class="index == tabCur ? 'cur' : ''">
					<view>{{ item.name }}</view>
					<view>{{ item.num }}</view>
				</view>
			</view>
		</view>
		<view class="section-3" v-for="(order,k) in tabNavBars.list" :key="k">
			<view class="content3">
				<view class="content3_title">
					<view>{{order.create_time}}</view>
					<view style="color:#00C049;">待发货</view>
				</view>
				<view class="content3_pro" v-for="(item,index) in order.cart_list" :key="index">
					<image :src="item.goods_info.image" class="content3_pro_image"></image>
					<view class="content3_center">
						<view class="content3_center_name">{{item.goods_info.title}}</view>
						<!-- <view class="content3_center_spec">规格:黑色</view> -->
					</view>
					<view class="content3_price">
						<view>￥{{item.goods_info.price}}</view>
						<view>x{{item.goods_info.num}}</view>
					</view>
				</view>
				<view class="section-3-total">共{{order.total_num}}件商品，总金额<text>￥{{order.total_price}}</text></view>
				<view @click="orderlistck(order.order_no)" class="order_btn">查看详情</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		orderlist
	} from '../../../api/mine.js'
	export default {
		data() {
			return {
				tabCur: 0, // 当前tabs下标
				total: '45.00',
				activeIndex: 0,
				tabNavBars: [{
						name: '待付款',
						// noOrderImg: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875885761,2373220900&fm=26&gp=0.jpg',
						noOrderTips: '您还没有待付款订单哦~',
						list: ['这是全部订单列表'], //该订单状态下数据。
						num: '9'
					},
					{
						name: '待发货',
						// noOrderImg: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1717329225,2115039553&fm=26&gp=0.jpg',
						noOrderTips: '您还没有待发货订单哦~',
						list: [],
						num: '10'
					},
					{
						name: '待收货',
						// noOrderImg: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1717329225,2115039553&fm=26&gp=0.jpg',
						noOrderTips: '您还没有待收货订单哦~',
						list: [],
						num: '10'
					},
					{
						name: '待评价',
						// noOrderImg: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1148236422,1147879121&fm=26&gp=0.jpg',
						noOrderTips: '您还没有待评价订单哦~',
						list: ['待收货订单列表'],
						num: '15'
					},
					{
						name: '己完成',
						// noOrderImg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1504800501,1844087668&fm=26&gp=0.jpg',
						noOrderTips: '您还没有订单哦~',
						list: [],
						num: '20'
					}
				],
				pro: [{
					name: '猕猴桃',
					price: '15.00',
					num: 1,
					icon: '../../../static/Mine/5.png'
				}, ],
				ordertotal: {
					total_num: '10',
					total_price: '1000.00'
				},
			}
		},
		onLoad() {
			this.getorderlist()
		},
		methods: {
			getorderlist() {
				orderlist().then(res => {
					if (res.status == 200) {
						console.log(res)
						this.ordertotal.total_num = res.data.total
						this.tabNavBars.list = res.data.data.reverse()
						this.pro=res.data.data.list.cart_list
						console.log('this.tabNavBars.list',this.tabNavBars.list)

					}
				})
			},
			// 加载下一页
			tabSelect(index) {
				if (this.tabCur === index) return
				this.tabCur = index
			},

			changeOrderNavAct(index) {
				// console.log(index);
				// 改变导航的激活样式根据索引下标
				this.activeIndex = index;
			},
			tabClick(index, name) {
				// 点击的index
				console.log(index, name);

				// 获取点击的数据
				console.log(this.tabs[index]);
			},
			orderlistck(order_id) {
				console.log(order_id)
				uni.navigateTo({
					url: "/pages/Mine/orderInfo/orderInfo2?order_id="+order_id,
					fail(fail) {
						console.log(fail)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.orderlist_header {
		background-color: #00C049;
		color: #fff;
		height: 280rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.orderlist_title {
			font-size: 40rpx;
			font-weight: 700;
			margin-bottom: 15rpx;

		}

		.orderlist_info {
			color: #CCF2DB;
			font-size: 28rpx;
		}

		image {
			margin-left: 103rpx;
			display: block;
			float: right;
			width: 180rpx;
			height: 140rpx;
			margin-top: -20rpx;
		}

	}
	.section-3 {
		position: relative;
		background-color: #FFF;
		border-radius: 12rpx;
		padding: 10rpx;
		margin: 20rpx;
		top: -200rpx;

		.content3 {

			padding: 20rpx 20rpx 80rpx 20rpx;

			.content3_title {
				display: flex;
				justify-content: space-between;
				font-size: 20rpx;
				border-bottom: 1rpx solid #F0F0F0;
				align-items: center;
				vertical-align: middle;
				padding-bottom: 15rpx;
			}

			.content3_pro {
				width: 100%;
				padding: 20rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.content3_pro_image {
					width: 160rpx;
					height: 160rpx;
					display: block;
					flex-shrink: 0;
				}

				.content3_center {
					flex: 1;
					padding: 20rpx 8rpx;
					box-sizing: border-box;
					margin-left: 20rpx;

					.content3_center_name {
						max-width: 310rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-size: 26rpx;
						line-height: 32rpx;
					}

					.content3_center_spec {
						font-size: 22rpx;
						color: #888888;
						line-height: 32rpx;
						padding-top: 20rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}

				.content3_price {
					text-align: right;
					font-size: 30rpx;
					color: #888888;
					line-height: 30rpx;
					padding-top: 20rpx;
				}
			}

		}

		.section-3-total {
			border-bottom: 1rpx solid #F0F0F0;
			text-align: right;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;

			text {
				color: #FF8500;
				font-weight: 500;
			}
		}

		.order_btn {
			margin-top: 10rpx;
			width: 170rpx;
			height: 60rpx;
			background-color: #00C049;
			display: block;
			float: right;
			border-radius: 50rpx;
			align-items: center;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			font-size: 30rpx;
		}
	}

	.tabs {
		display: flex;
		justify-content: space-evenly;
		font-size: 24rpx;
		background-color: #FFF;
		align-items: center;
		position: relative;
		border-radius: 15rpx;
		margin: 120rpx 30rpx 30rpx 30rpx;
		z-index: 999;
		top: -200rpx;
		height: 160rpx;
	}

	.tab_item {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.cur {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		border-bottom: 5rpx solid #00C049;
	}
</style>
